<template>
    <div>
        <p>{{ title }}</p>
        <p v-for="item in user" :key="item">{{ item }}</p>
        <p>{{ msg }}</p>
        <button @click="emit('sonEmit',1,'string',{name:'小强'})">emit触发父组件绑定子组件上的函数</button>
        <button @click="editTitle">emit触发父组件绑定子组件上的函数</button>
        <button @click="triggerEvent1">trigger Event 1</button>
        <button @click="triggerEvent2">trigger Event 2</button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
interface Iuser{
    id?:number
    name:string
    age:number
    sex:string
}
const emit=defineEmits(['sonEmit','sonEmit2','event1','event2'])
const {title='江山如此多娇',user,msg}=defineProps<{
    title?:string,
    user:Iuser,
    msg?:string
}>()
const tle=ref(title)
const editTitle=()=>{
    tle.value='数风流人物，只看今朝';
    emit('sonEmit2');
}
const triggerEvent1=()=>{
    emit('event1','data for event1')
}
const triggerEvent2=()=>{
    emit('event2','data for event2')
}
</script>